<!-- 预览 数据定制-->

<template>
    <div class="flex flex-c data-view">
        <div class="title"> 数据定制 </div>
        <div class="flex">
            <div class="table-list flex data-list flex-1">
                <div class="flex-1 flex flex-c " >
                    <div class="table-content">
                        <div class="table-tr flex">
                            <div style="color:#7a7f85;">订阅数据</div>
                            <div>{{ dataParams.filename }}</div>
                        </div>
                        <!-- <div class="table-tr flex">
                            <div style="color:#7a7f85;">订阅数据时间:</div>
                            <div>{{ dataParams }}</div>
                        </div>
                        <div class="table-tr flex">
                            <div style="color:#7a7f85;">要素列表:</div>
                            <div>海平面气压,最低气压,极大风速,2分钟平均风向</div>
                        </div> -->
                        <div v-for="(item, index) in Object.keys(dataParams.jsonDate)" :key="index" class="table-tr flex">
                                <template v-if="dataParams.jsonDate[item].length != 0">
                                        <div style="color:#7a7f85;">{{ item }}</div>
                                        <div style="display: flex; flex-wrap: wrap;color: #333333;">
                                            <template v-if="Array.isArray(dataParams.jsonDate[item])">
                                                <!-- <span v-for="(el) in dataParams.jsonDate[item]">{{ el.name }},</span> -->
                                                {{ dataParams.jsonDate[item].join('，') }}
                                            </template>
                                            <template v-else>
                                                {{ dataParams.jsonDate[item] }}
                                            </template>
                                        </div>
                                </template>
                        </div>
                        <div class="table-tr flex" v-if="dataParams.showType != 3">
                            <div style="color:#7a7f85;">订阅范围</div>
                            <div v-if="dataParams.showType == 2">
                                <div>
                                    <div v-for="(item, index) in dataParams.scope.split(',')" :key="index">{{ item }}</div>
                                </div>
                            </div>
                            <div v-if="dataParams.showType == 1">{{ dataParams.scope }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="title" style="margin-top: 10px;"> 订阅方式  </div>
        <div>
            <!-- <div class="title-ls"> {{ dataParams.datatype == 1 ? '军综网' : '指挥专网' }}</div> -->
            <!-- 军综网 -->
            <template v-if="dataParams.datatype == 1">
                <div class="table-list flex data-list flex-1">
                    <div class="flex-1 flex flex-c " >
                        <div class="table-content">
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">订阅类型</div>
                                <div>军综网</div>
                            </div>
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">路径</div>
                                <div>{{ dataParams.url }}</div>
                            </div>
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">FTP地址</div>
                                <div>{{ dataParams.ipaddr }}</div>
                            </div>
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">端口号</div>
                                <div>{{ dataParams.protno }}</div>
                            </div>
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">用户名</div>
                                <div>{{ dataParams.account }}</div>
                            </div>
                            <div class="table-tr flex">
                                <div style="color:#7a7f85;">密码</div>
                                <div>{{ dataParams.password }}</div>
                            </div>
                           
                        </div>
                    </div>
                </div>
                <!-- <div class="flex" style="width: 80%;">
                    <div class="flex-1">FTP地址：  {{ dataParams.ipaddr }}</div>
                    <div class="flex-1">端口号：{{ dataParams.protno  }}</div>
                </div>
                <div class="flex" style="width: 80%;">
                    <div class="flex-1">用户名: {{ dataParams.account  }}</div>
                    <div class="flex-1">密码：{{ dataParams.password  }}</div>
                </div>
                <div class="flex" style="width: 80%;">
                    <div class="flex-1">路径: {{ dataParams.url  }}</div>

                </div> -->
            </template>
            <!-- 指挥专网 -->
            <template v-if="dataParams.datatype == 2">
                <!-- <div>请提供长报文服务地址：  {{ dataParams.ipaddr }}</div>
                <div>接收端路径：{{ dataParams.protno  }} </div> -->
                <div class="table-list flex data-list flex-1">
                    <div class="flex-1 flex flex-c " >
                        <div class="table-content">
                            <div class="table-tr flex">
                                <div>订阅类型</div>
                                <div>指挥专网</div>
                            </div>
                            <div class="table-tr flex">
                                <div>请提供长报文服务地址：</div>
                                <div>{{ dataParams.lmsa }}</div>
                            </div>
                            <div class="table-tr flex">
                                <div>接收端路径：</div>
                                <div>{{ dataParams.lmasurl }}</div>
                            </div>
                         
                        </div>
                    </div>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
    import wizMap from "@/components/wizMap/wizMap.vue";

    export default {
        name: 'dataView',
        data() {
            return {
                dataParams: {
                    showType: 1,
                    datatype: '2',
                    range: '地图框选',
                    timetype: 1,
                    isexamine: 1,   //1未审核 2审核通过 3审核拒绝
                    dataViewName: '中国地面逐小时资料',
                    jsonDate: {
                        dataView: {
                            "中国地面逐小时资料": {
                                "关键词": "888888",
                                "数据量": "88888",
                                "描述": "888888",
                                "更新频率": "888888",
                                "最新更新时间": "88888"
                            }
                        },   // 表头数据
                        mapPosition: '',
                        '定制范围': [],
                        '订阅时次': [],
                        "时效": [],
                        '订阅数据时间': [],
                        '要素列表': [],
                        '站点选择': [],
                        'L1通道选择': [],
                        'L2产品选择': [],
                        '卫星选择': [],
                        '地面要素': [],
                        '高空层次': [],
                        '高空要素': [],
                        '标志列表': [],
                        '质控码列表': [],
                        "静止卫星": [],
                        "极轨卫星": [],
                        "其他卫星": [],
                    },
                    fileid: '',
                    datelong: '',
                    account: '',
                    password: '',
                    protno: '',
                    url: '',
                    ipaddr: '',
                    filename: '',
                    startime: '',
                    endtime: '',
                    crearetime: '',
                    lmsa: '',
                    lmasurl: '',
                }
            }
        },
        components: {
            wizMap,
        },
        mounted(){
        },
        methods: {
            initParams(params){
                // console.log(params, 'initParams');
                let dataParams = JSON.parse(JSON.stringify(params))
                delete dataParams.jsonDate.dataView
                delete dataParams.jsonDate.mapPosition
                delete dataParams.jsonDate.dataViewName
                delete dataParams.jsonDate.yaosuValue
                delete dataParams.jsonDate.yaosuName
                delete dataParams.jsonDate.yaosuObj
                delete dataParams.jsonDate.showType
                console.log(dataParams.jsonDate, params, 'initParams');

                this.dataParams = dataParams
            }
        }
  }
</script>
<style lang="scss" scoped>
.data-view{
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    .title{
		font-size: 14px;
		padding: 0 15px;
        height: 35px;
		font-weight: bold;
		background-color: #f2f6fc;
        display: flex;
        align-items: center;
        // background-image: url(../../public/image/title-bg.png);
        // background-size: 100% 100%;
        position: relative;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 5px;
            height: 100%;
            background-color: #308CE9;
        }
	}
    .title-ls{
        font-size: 16px;
        padding: 10px 0;
        color: #333333;
        font-weight: bold;
    }
    .table-list >div:nth-child(1){
        padding: 10px;
    }
    .table-list, .data-list{
        font-size: 14px;
        display: flex;
        color: #333333;
        .table-content{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            // flex-direction: column;
            .table-tr{
                width: 50%;
                // border-left: 1px solid #fff;
                // border-right: 1px solid #fff;
                // border-top: 1px solid #fff;
                >div:nth-child(1){
                    width: 120px;
                    padding: 8px 10px;
                    // min-height: 160px;
                    // background-color: #eee;
				    background: linear-gradient(-73deg, #DBE8F8, #F3F8FC);
                    border-top: 1px solid #fff;
                    border-left: 1px solid #fff;
                    // background-image: linear-gradient(to left, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
                    display: flex;
                    align-items: center;
                    border-right: 1px solid #fff;
                }
                >div:nth-child(2){
                    flex: 1;
                    display: flex;
                    align-items: center;
                    padding: 3px 10px;
                    background: #F8F8F9;
                    border-top: 1px solid #fff;
                }
            }
            
        
        }
    }
	.data-list{
		// border: 1px solid #308CE9;
		>div:nth-child(1){
			padding: 0;
		}
		.customized-top-right{
			width: 300px;
			display: flex;
			flex-direction: column;
            padding: 10px;
            color: #606266;
            >div:nth-child(1){
                margin-bottom: 10px;
            }
			>div{
                flex: 1;
                padding: 0 20px;
                background-image: url(../../public/image/juxing.png);
                background-size: 100% 100%;
                text-align: center;
            }
            .title{
                font-size: 14px;
                background: none;
            }
            .content{
                font-size: 16px;
                color: #000;
            }
		}
	}
}

</style>